<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Multiple-inputs-auto-focus</title>
    <style>
        input {
            width: 40px;
            margin: 10px 5px;
            height: 40px;
            line-height: 40px;
            border: 1px solid #e8e8e8;
            border-radius: 5px;
            font-size: 16px;
            text-align: center
        }
    </style>
</head>

<body>
    <div class="transaction_code_input transactionCodeInput">
        <input type="text" name="" value="" maxlength="1" />
        <input type="text" name="" value="" maxlength="1" />
        <input type="text" name="" value="" maxlength="1" />
        <input type="text" name="" value="" maxlength="1" />
        <input type="text" name="" value="" maxlength="1" />
        <input type="text" name="" value="" maxlength="1" />
    </div>

    <script>
        var transactionCodeInput = document.getElementsByClassName("transactionCodeInput")[0];
        transactionCodeInput.onkeyup = function(e) {
            var target = e.srcElement || e.target;
            var maxLength = parseInt(target.attributes["maxlength"].value, 10);
            var myLength = target.value.length;
            if (myLength >= maxLength) {
                var next = target;
                while ((next = next.nextElementSibling)) {
                    if (next == null) break;
                    if (next.tagName.toLowerCase() === "input") {
                        next.focus();
                        break;
                    }
                }
            } else if (myLength === 0) {
                // Move to previous field if empty (user pressed backspace)
                var previous = target;
                while ((previous = previous.previousElementSibling)) {
                    if (previous == null) break;
                    if (previous.tagName.toLowerCase() === "input") {
                        previous.focus();
                        break;
                    }
                }
            }
        }
    </script>
</body>

</html>
